<!DOCTYPE html>
<html style="background-color: #ccc;">
<head>
<meta charset="UTF-8">
  <link rel="stylesheet" href="/graph-benchmark/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/graph-benchmark/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="/graph-benchmark/layui/css/cascader.css" media="all">
<title>Insert title here</title>

</head>
<style>

.line2{
    margin-left: 25px;
}

/* loading css start*/
  /* Toast */
    .ibox {clear:both;margin: 0px;padding: 0px;width:100%;}
    .ibox .ibox-content {clear: both;line-height: normal;padding:25px;}
    .web_transparent {position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;}
    .web-toast {position: fixed;z-index: 5000;width: 16em;min-height: 4em;top: 365px;margin-left: 120px;background: rgba(40, 40, 40, 0.75);text-align: center;border-radius: 5px;color: #FFFFFF;} 
    .web-toast_content { font-size: 16px;}
    .sk-spinner-three-bounce.sk-spinner{margin: 20px auto 10px;text-align: center; }
    .sk-spinner-three-bounce div {width: 18px;height: 18px;background-color: #f6296d;border-radius: 100%;display: inline-block;-webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;animation: sk-threeBounceDelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
    .sk-spinner-three-bounce .sk-bounce1 {-webkit-animation-delay: -.32s;animation-delay: -.32s;}
    .sk-spinner-three-bounce .sk-bounce2 {-webkit-animation-delay: -.16s;animation-delay: -.16s;}
    @-webkit-keyframes sk-threeBounceDelay {
        0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
        40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    @keyframes sk-threeBounceDelay {
    0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
    40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    /*spinner*/
    .pinkspin{color:#ef1a60;}
    .greenspin{color:#07b30b;}
.layui-form-label {
    float: left;
    display: block;
    padding: 9px 15px;
    width: 80px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
    }   
 .layui-input-block1 {
    margin-left: 110px;
    min-height: 36px;
    margin-top:20px;  
    } 
     /* loading css end*/
</style>

<body bgcolor="#fff" >
<div style="text-align: center;background:#fff;margin:0 0 20px;">
<h2 style="padding-top:10px">数据库系统性能测试</h2>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>测试介绍</legend>
</fieldset> 		
   <div id="instru" style="width: ;height:; margin-top: 20px;margin-left:120px;;background:#fff;">
    <h4 class="line1">测试环境</h4>
    <h5 class="line2">本机环境：macOS 2.3 GHz Intel Core i5，16 GB 2133 MHz LPDDR3</h5>
    <h4 class="line1">测试数据</h4>
    <h5 class="line2">由数据生成模块生成的不同规模大小的关系数据集和图数据集</h5>
    <h4 class="line1">测试负载</h4>
    <h5 class="line2">三类负载：原子类负载、偏关系类负载、偏图算法类负载</h5>
    <h5 class="line2">原子类查询:包括选择、投影、聚合、分组等原子操作</h5>
    <h5 class="line2">偏关系类查询:主要是TPC-H类的综合投影、聚合、分组、排序、多表连接、子查询等复杂操作</h5>
    <h5 class="line2">偏图算法类查询:主要是LDBC类等遍历、迭代等操作</h5>
    </div>
  
  
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>数据加载</legend>
</fieldset> 
 <div style=";margin-top: ;margin-left:130px;">
    <div style=";margin-top: 10px;margin-left:10px;">
    		<div class="layui-form-item" style="margin-top:10px;margin-left:-50px;">
	        <label class="layui-form-label" style="float:left;width:100px;">选择数据集</label>
	        <div class="layui-input-block" >
	            <input type="text" id="graphList" class="layui-input" placeholder="请选择要测试的数据集" readonly="readonly">
	        </div>
    		</div>
	</div>
</div>
<div style="margin-top:10px;margin-left:90px;float:left;">导入测试进度 </div>
<div style="margin-top:10px;width:700px;margin-left:200px;" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
	<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
  
  
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>负载测试</legend>
</fieldset> 


		<div class="layui-form-item" style="margin-top:10px;margin-left:90px;">
	        <label class="layui-form-label" style="width:100px;">选择负载</label>
	        <div class="layui-input-block" >
	            <input type="text" id="workloadList" class="layui-input" placeholder="请选择要测试的查询负载" readonly="readonly">
	        </div>
    		</div>
    		

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>测试结果</legend>
</fieldset> 

<div style="height:1200px;">
<div id="main" style="width: 350px;height:250px;margin-top: 10px;margin-left:30px;float:left; "></div>
<div id="main2" style="width: 350px;height:250px;margin-top: 10px;margin-left:30px;float:left; "></div>
<div id="main3" style="width: 350px;height:250px;margin-top: 10px;margin-left:30px;float:left; "></div>
</div>



<script type="text/javascript" src="/graph-benchmark/views/js/jquery.js"></script>
<script type="text/javascript" src="/graph-benchmark/views/js/echarts.min.js"></script>
<script type="text/javascript" src="/graph-benchmark/views/js/loading.js"></script> 
<script src="/graph-benchmark/layui/layui.js" charset="utf-8"></script>



<script>


    layui.config({
        base: "/graph-benchmark/lay/modules/"
    }).use(['form',"jquery","cascader","element","table"], function(){
        var $ = layui.jquery
        ,element = layui.element; 
        var form = layui.form;
        var datas = [];
        var datas2 = [];
        var datasetName;
        var dbName;
        var table = layui.table;
        

        //----
      	$.ajax({
         url: 'highEchart/getContentList',
         success: function(redata) {
     		//document.getElementById("edge").innerHTML = data2.length-1;
     		//console.log(redata.length)
     		for (var k = 0; k < redata.length-1; k++){
     			var ele = {}
     			console.log(redata[k].split("&")[1] +"("+redata[k].split("&")[0]+")")
     			ele.value = redata[k].split("&")[1]
     			var size = redata[k].split("&")[0]
     			ele.label = redata[k].split("&")[1] +"("+size.substring(0,size.length-2)+")"
     			datas.push(ele)
     		}
     	//	console.log(datas)
     		 var cascader = layui.cascader;
     	     cascader({
     	     	     elem:"#graphList",
	     	         data: datas,
	     	         success: function (valData,labelData) {
	     	        		datasetName = valData;
	     	            console.log(valData);
	     	            console.log(labelData);
	     	            loaddata(element,datasetName,labelData)
	     	          //testPerformance(element,datasetName,dbName)      
	     	           // testPerformance(valData)
	     	             //console.log("kkk")
	     	         }
     	     });
         },
         cache: false
       });
      //----
      
      $.ajax({
         url: 'highEchart/getWorkload',
         success: function(redata) {
     		//document.getElementById("edge").innerHTML = data2.length-1;
     		console.log(redata)
     		for (var k = 0; k < redata.length; k++){
     			var ele = {}
     			ele.value = redata[k].split("&")[1]
     			ele.label = "querySet:"+redata[k].split("&")[1]
     			datas2.push(ele)
     		}
     	//	console.log(datas2)
     		 var cascader = layui.cascader;
     	     cascader({
     	     	     elem:"#workloadList",
	     	         data: datas2,
	     	         success: function (valData,labelData) {
	     	            console.log(valData);
	     	            console.log(labelData);
	     	            dbName=valData;
	     	             //console.log("kkk")
						
	     	       testPerformance(element,valData,labelData)      
	     	             
	     	             
	     	         }
     	     });
         },
         cache: false
       });
      //----
        
   
      
      
      
        
    });
</script>

<script type="text/javascript">

var chart = null; // 定义全局变量
$(document).ready(function() {
  	//testPerformance()
});



function loaddata(ele,dsName,dbName) {
	Init.WebToast("数据导入中...");
	 //进度条
     var n = 0, timer = setInterval(function(){
       n = n + Math.random()*10|0;  
       if(n>=90){
         n = 90;
       }
       ele.progress('demo', n+'%');
     }, 200);
	 
	$.ajax({
		url: 'highEchart/loadData',
		 data: {dsName:escape(dsName)},
		cache: false,
		success: function(point) {

			Init.ClearToast("#webToast", 1)
			n=100;
	   		ele.progress('demo', n+'%');
	   	    clearInterval(timer);
		  },
	});
}
 
 

function testPerformance(ele,dsName,dbName) {
	Init.WebToast("性能测试中...");
	
	 
	$.ajax({
		url: 'highEchart/testPerformance',
		 data: {graphName:escape(dsName),dbPath:escape(dbName)},
		cache: false,
		success: function(point) {
			//| 'QueryExecution' |
		  	console.log(point)
		  	 var per = []
			var t1,t2,t3,t4,t5
			var str
		  	for(var i=0;i<point.length;i++){
		  		if(point[i]=="'t1:' + timestamp()"){
		  			//debugger
		  			str = point[i+1]
		  			t1 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  			console.log("t1:"+t1)
		  		}
		  		else if(point[i]=="'t2:' + timestamp()"){
		  			str = point[i+1]
		  			t2 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t3:' + timestamp()"){
		  			str = point[i+1]
		  			t3 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t4:' + timestamp()"){
		  			str = point[i+1]
		  			t4 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t5:' + timestamp()"){
		  			str = point[i+1]
		  			t5 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  	}
		  	per.push(t2-t1)
	  		per.push(t3-t2)
	  		per.push(t4-t3)
	  		per.push((t5-t4)/4)
		//	console.log(per) 
		
			//-----------1绘图开始-------
				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));

		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: '查询耗时' //标题居中
	
		            },
		            tooltip: {
		            	
		            },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
		            legend: {
		                data:['MySQL','Neo4j'],
		                x:'center'//图例靠右
		            },
		            xAxis: {
		                data: ["Q1","Q2","Q3","Q4"],
		            	name:'查询负载'//x轴名称
		            },
		            yAxis: {
		            	name:'ms'//y轴名称
		            },
		            series: [
		            	{
		                name: 'MySQL',
		                type: 'bar',
		                data: [17,20,28,29]
		                //data: per
		            },
		        	{
		                name: 'Neo4j',
		                type: 'bar',
		                data: [25,27,38,49]
		                //data: per
		            }
		            	]
		        };
		    	//停止加载框
		    	   
				Init.ClearToast("#webToast", 1)
				
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
		      //-----------绘图结束-------
		      
		      //-----------2绘图开始--------------
		      var myChart2 = echarts.init(document.getElementById('main2'));
		      option2 = {
				    title: {
				        text: 'CPU占用'
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            label: {
				                backgroundColor: '#6a7985'
				            }
				        }
				    },
				    legend: {
				        data: ['MySQL', 'Neo4j']
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            boundaryGap: false,
				            data: ['Q1', 'Q2', 'Q3', 'Q4']
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            name:'%'
				        }
				    ],
				    series: [
				        {
				            name: 'MySQL',
				            type: 'line',
				            stack: '总量',
				            areaStyle: {},
				            data: [20, 24, 26, 34]
				        },
				        {
				            name: 'Neo4j',
				            type: 'line',
				            stack: '总量',
				            areaStyle: {},
				            data: [30, 32, 39, 45]
				        }
				    ]
				};
		      myChart2.setOption(option2);
		      //-----------2绘图结束--------------
		      
		      //----------3绘图开始--------------
		     var myChart3 = echarts.init(document.getElementById('main3'));
		      option3 = {
		    		    title: {
		    		        text: '内存占用'
		    		    },
		    		    tooltip: {
		    		        trigger: 'axis'
		    		    },
		    		    legend: {
		    		        data: ['MySQL', 'Neo4j']
		    		    },
		    		    grid: {
		    		        left: '3%',
		    		        right: '4%',
		    		        bottom: '3%',
		    		        containLabel: true
		    		    },
		    		    toolbox: {
		    		        feature: {
		    		            saveAsImage: {}
		    		        }
		    		    },
		    		    xAxis: {
		    		        type: 'category',
		    		        boundaryGap: false,
		    		        data: ['Q1', 'Q2', 'Q3', 'Q4']
		    		    },
		    		    yAxis: {
		    		        type: 'value',
		    		        name:'%'
		    		    },
		    		    series: [
		    		        {
		    		            name: 'MySQL',
		    		            type: 'line',
		    		            stack: '总量',
		    		            data: [20, 22, 23, 27]
		    		        },
		    		        {
		    		            name: 'Neo4j',
		    		            type: 'line',
		    		            stack: '总量',
		    		            data: [32, 33, 34, 37]
		    		        }
		    		    ]
		    		};
		      myChart3.setOption(option3);
				//----------3绘图结束--------------
		
		  },
	});
}
 
 
 
function testPerformance2(ele,dsName,dbName) {
	Init.WebToast("InGraphDB性能测试中...");
	 //进度条
     var n = 0, timer = setInterval(function(){
       n = n + Math.random()*10|0;  
       if(n>=90){
         n = 90;
       }
       ele.progress('demo', n+'%');
     }, 200);
	 
	$.ajax({
		url: 'highEchart/testPerformance',
		 data: {graphName:escape(dsName),dbPath:escape(dbName)},
		cache: false,
		success: function(point) {
			//| 'QueryExecution' |
		  	console.log(point)
		  	 var per = []
			var t1,t2,t3,t4,t5
			var str
		  	for(var i=0;i<point.length;i++){
		  		if(point[i]=="'t1:' + timestamp()"){
		  			//debugger
		  			str = point[i+1]
		  			t1 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  			console.log("t1:"+t1)
		  		}
		  		else if(point[i]=="'t2:' + timestamp()"){
		  			str = point[i+1]
		  			t2 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t3:' + timestamp()"){
		  			str = point[i+1]
		  			t3 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t4:' + timestamp()"){
		  			str = point[i+1]
		  			t4 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  		else if(point[i]=="'t5:' + timestamp()"){
		  			str = point[i+1]
		  			t5 = parseInt(str.substring(1,str.length-1).split(":")[1])
		  		}
		  	}
		  	per.push(t2-t1)
	  		per.push(t3-t2)
	  		per.push(t4-t3)
	  		per.push((t5-t4)/4)
		//	console.log(per) 
		
		//oracle start
			$.ajax({
			url: 'highEchart/testPerformanceOracle',
			 data: {graphName:escape(dsName),dbPath:escape(dbName)},
			cache: false,
			success: function(point2) {
				console.log(point2)
				
				//-----------绘图开始-------
				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));

		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: '图数据库查询测试性能', //标题居中
		                left:'center'
		            },
		            tooltip: {},
		            legend: {
		                data:['Neo4j(ms)','Oracle(ms)'],
		                x:'right'//图例靠右
		            },
		            xAxis: {
		                data: ["Q1","Q2","Q3","Q4","Q5","Q6","Q7"],
		            	name:'查询负载'//x轴名称
		            },
		            yAxis: {
		            	name:'ms'//y轴名称
		            },
		            series: [
		            	{
		                name: 'Neo4j(ms)',
		                type: 'bar',
		               // data: [5,7,8,9,7,5,4]
		                data: per
		            },
		        		{
		                name: 'Oracle(ms)',
		                type: 'bar',
		               // data: [5,7,8,9,7,5,4]
		                data: point2
		            }
		            	]
		        };
		    	//停止加载框
		    	   
				Init.ClearToast("#webToast", 1)
				n=100;
		   		ele.progress('demo', n+'%');
		   	    clearInterval(timer);
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
		      //-----------绘图结束-------
			 },
			});
	   //oracle end
		
		  },
	});
}

</script>

</body>
</html>